<!-- @format -->
<template>
  <div class="table-form-container_content">
    <el-row style="background-color:rgba(0,0,0,0)">
      <el-col :span="24">
        <!-- form表单 -->
        <div class="table-header" v-if="tableSearch && tableSearch.length > 0">
          <el-form size="small" :rules="rules" :model="formSearch" :inline="true" ref="formSearch" label-position="right"
            v-bind="{ 'label-width': '110px', ...(options && options.formProps) }">
            <!-- 搜索栏位置标题 -->
            <slot name="tableheadertitle"></slot>
            <el-form-item :key="index" :prop="item.value" class="table-header-item" :label="item.label"
              v-bind="item.labelProps" v-for="(item, index) in tableSearch">
              <!-- 查询标题 -->
              <span style="marginRight: 10px" v-if="item.title && item.title != undefined">{{ item.title }}</span>
              <el-select clearable v-bind="item.props" v-if="item.type === 'select'" v-model="formSearch[item.value]"
                :placeholder="`请选择${item.placeholder || item.label}`">
                <el-option v-for="option in item.children" :key="option.value" :value="option.value"
                  :label="option.label" />
              </el-select>
              <el-date-picker clearable style="width: 100%" placeholder="选择日期" v-model="formSearch[item.value]"
                v-else-if="item.type === 'picker'" v-bind="item.props || { type: 'date' }" />
              <el-cascader clearable v-bind="item.props" :options="item.options" v-model="formSearch[item.value]"
                v-else-if="item.type === 'cascader'" :placeholder="`请输入${item.placeholder || item.label}`"></el-cascader>
              <el-input v-else clearable v-bind="item.props" :type="item.inputType || 'text'"
                v-model="formSearch[item.value]" :placeholder="`请输入${item.placeholder || item.label}`"
                :maxlength="item.maxlength" @keyup.enter.native="handleSearch" :oninput="handleChangeInput(item)" />
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
              <el-button plain size="small" icon="el-icon-refresh-right" @click="handleReset('formSearch')">重置</el-button>
            </el-form-item>
            <!-- 搜索栏插槽 -->
            <slot name="tableheader"></slot>
          </el-form>
        </div>

        <!-- 扩展性内容 -->
        <slot name="content_context"></slot>

        <!-- table中间button eg:导出 -->
        <div v-if="exportBut && exportBut.length > 0" class="btn-operates">
          <a :key="index" :href="item.href || null" v-for="(item, index) in exportBut" @click="item.method()">
            <nu-button size="small" type="primary">{{ item.title }}</nu-button>
          </a>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="table-col">
        <!-- 表格上插槽，页签等 -->
        <slot name="tableTopSlot"></slot>
        <hidenColumns :tableData.sync="tableDataList" @subChange="subChange" class="hideshow"
          v-show="showFilter == true" />
        <!-- table表格 -->
        <!-- <div @mouseover="changeM" @mouseout="changeO"> -->
        <div>
          <el-table v-if="showTable" size="small" :border="border" :data="
            isWebPagination && dataSource.length && pagination
              ? dataSource.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
              : dataSource
          " v-loading="loading" v-bind="options" v-on="$listeners" ref="multipleTable" :indents="indents" highlight-current-row
            @selection-change="handleSelectionChange" @mouseover="changeM" @mouseout="changeO" @current-change="handleCurrentChange"
            @expand-change="expandChange" :default-expand-all="options.expand == undefined ? true : options.expand"
            :expand-row-keys="expandArr" :default-sort="options.defaultSort" :cell-class-name="setClass"
            :empty-text="options.emptyText || '暂无数据'">
            <!-- :summary-method="getSummaries" -->
            <!-- :show-summary="isTotal" -->
            <!-- 复选框 -->
            <el-table-column type="selection" style="width: 55px" v-if="options && options.selection"
              :selectable="options.selectable" />
            <!-- && (!options.isShow || options.isShow()) -->
            <!-- 序号 -->
            <el-table-column width="60" align="center" type="index" v-if="options && options.index"
              :label="options && options.labelIndex" />

            <!-- 表格数据 -->
            <template v-for="(column, index) in tableDataList">
              <table-columns :column="column" :key="index + 'father'" :fixed="column.fixed"
                :align="index == 0 && options['tree-props'] ? 'left' : 'center'"></table-columns>
            </template>

            <!-- slot插槽按钮 -->
            <el-table-column label="操作" align="right" v-if="options && options.slotcontent">
              <template slot-scope="scope">
                <slot :data="scope"></slot>
              </template>
            </el-table-column>

            <!-- 操作按钮 -->
            <el-table-column label="操作" align="center" v-bind="options && options.props"
              v-if="operates && operates.length > 0" :width="operates.length * 70">
              <template slot-scope="scope">
                <div class="operate-group">
                  <template v-for="(btn, key) in operates">
                    <span :key="key" v-if="!btn.isShow || (btn.isShow && btn.isShow(scope.row, scope.$index))">
                      <template v-if="btn.render">
                        <render :column="scope.row" :row="scope.row" :render="btn.render" :index="scope.$index"></render>
                      </template>
                      <template v-if="!btn.render">
                        <nu-button class="tableOperateBtn" :size="btn.size || 'small'" :type="btn.type || `text`"
                          :icon="btn.icon" :plain="btn.plain"
                          :style="btn.setStyle ? btn.setStyle(scope.row, scope.$index) : ''" v-bind="btn.props"
                          @click.native.prevent="btn.method(scope.row, scope.$index)"
                          :disabled="btn.disabled && btn.disabled(scope.row, scope.$index)">{{ btn.label }}</nu-button>
                      </template>
                    </span>
                  </template>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- </div> -->
        <!-- 分页部分 -->
        <el-pagination background class="pagination" v-if="pagination" :total="pagination.total"
          :page-size="pagination.pageSize" :page-sizes="[10, 15, 20, 25, 30]" @size-change="handleSizeChange"
          @current-change="handleChangePage" v-bind="options && options.pageExtend" :current-page="pagination.currentPage"
          :layout="
            options && options.pageExtend && options.pageExtend.layout
              ? options.pageExtend.layout
              : pagination.pageSize
                ? 'sizes,total, prev, pager, next'
                : 'total, prev, pager, next'
          " v-on="options && options.handlePageEvent" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { convertParams } from './convertParams';
import tableColumns from './tableColumns.vue';
import hidenColumns from './hidenColumns.vue';
import nuButton from "@/components/base/button"
// import EditableCell from './EditableCell.vue'
const methods = {
  // 复选框选中项
  handleSelectionChange(val) {
    this.multipleSelection = val;
    this.$emit('handleSelectionChange', Array.from(val));
  },
  //单选
  handleCurrentChange(val){
    this.$emit('handleCurrentChange',val);
  },
  //每页条数变化事件
  handleSizeChange(val) {
    this.$emit('handleSizeChange', val);
  },
  // 改变分页触发事件
  handleChangePage(val) {
    this.$emit('handleChangePage', val);
  },

  // 搜索查询按钮
  handleSearch() {
    if (this.rules) {
      return this.$refs['formSearch'].validate(valid => {
        if (!valid) return false;
        this.$emit('handleSearch', convertParams(Object.assign({}, this.formSearch)));
      });
    }
    this.$emit('handleSearch', convertParams(Object.assign({}, this.formSearch)));
  },

  // 搜索重置按钮
  handleReset(formName) {
    this.$refs[formName].resetFields();
    this.formSearch = this.reset ? { ...this.value } : {};
    this.$emit('handleReset');
    if (this.reset) return false;
    this.handleSearch();
  },

  // input为number校验
  handleChangeInput(item) {
    return item.inputType === 'number'
      ? this.handleOnInput(this.formSearch[item.value], item.value, item.rulesLength)
      : null;
  },

  // input渲染长度校验
  handleOnInput(val, label, rulesLength, maxlength = 11) {
    if (val && Number(val) <= 0) {
      this.formSearch[label] = 0;
    }
    if (rulesLength && val && val.length > maxlength) {
      this.formSearch[label] = this.formSearch[label].slice(0, maxlength);
    }
  },
  // 行滚动方法
  commercialCoal() {
    const tableScrolling = this.$refs.multipleTable;
    // console.log(tableScrolling, 'tableScrolling');
    const divData = tableScrolling.bodyWrapper;
    setInterval(() => {
      // 元素自增距离顶部1像素
      if (this.mouseoverJ == true) {
        divData.scrollTop += 2;
        if (divData.clientHeight + divData.scrollTop + 5 >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    }, 80);
  },
  // 展开行监控
  expandChange(row, isExp) {
    let temp = this.expandRows.findIndex(item => {
      item.row[this.options['row-key']] == row[this.options['row-key']];
    });
    if (temp != -1) {
      this.expandRows[temp].isExp = isExp;
    } else {
      this.expandRows.push({ row: row, isExp: isExp });
    }
  },
  changeM() {
    this.mouseoverJ = false;
  },
  changeO() {
    this.mouseoverJ = true;
  },
  setClass(row) {
    if (row.rowIndex == 0) {
      let isTotal = false;
      Object.values(row.row).forEach(item => {
        if (typeof item == 'string' && item.includes('合计')) {
          isTotal = true;
        }
      });
      if (this.options.fixedTotal) {
        isTotal = true;
      }
      if (isTotal) {
        return 'fixline';
      }
    }
    if (this.options?.cellClassName) {
      return this.options.cellClassName(row)
    }
  },
  subChange() {
    let temp = this.tableDataList;
    this.tableDataList = [];
    this.tableDataList = temp;
    this.showTable = false;
    this.$nextTick(() => {
      this.showTable = true;
      this.$refs.multipleTable.doLayout();
    });
    console.log(this.tableDataList);
  },
};

export default {
  name: 'table-list',
  // components:{ EditableCell },
  props: {
    // 是否滚动
    commercialCoalIf: {
      type: Boolean,
      default: false,
    },
    // 搜索栏
    tableSearch: {
      type: Array,
    },
    // 校验规则
    rules: {
      type: Object,
    },
    value: {
      type: Object,
    },
    // 重置
    reset: {
      type: Boolean,
    },
    // 表格数据
    dataSource: {
      type: Array,
      default: () => [],
    },
    // 表头
    columns: {
      type: Array,
      default: () => [],
    },
    // 纵向边框
    border: {
      type: Boolean,
      default: false,
    },
    // 是否有数据加载动画
    loading: {
      type: Boolean,
      default: false,
    },
    slotcontent: {
      type: Boolean,
      default: false,
    },
    // 操作按钮数组
    operates: {
      type: Array,
    },
    // 分页属性对象
    pagination: {
      type: Object,
      default: null,
    },
    // 分页总条目数
    dataTotal: {
      type: Number,
      default: 0,
    },
    // 是否有导出按钮
    exportBut: {
      type: Array,
    },
    expandArr: {
      type: Array,
    },
    options: Object,
    tableEvents: Object,
    indents: {
      type: Number,
    },
    showFilter: {
      type: Boolean,
      default: true,
    },
    isWebPagination: {
      type: Boolean,
      default: false,
    }
  },

  data() {
    return {
      formSearch: {},
      multipleSelection: [],
      mouseoverJ: true,
      expandRows: [],
      tableDataList: [],
      showTable: true,
      // tableDataNew: [],
      // tableData: [],
      // totalData: {},
      // isTotal: false,
    };
  },
  mounted() {
    this.formSearch = { ...this.value };
    this.tableDataList = this.columns;
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.multipleTable);
      this.$refs.multipleTable.doLayout();
    });
    if (this.commercialCoalIf) {
      this.commercialCoal();
    }
  },
  created() {
    this.$nextTick(() => {
      const level = document.getElementsByClassName('el-table__row--level-1');
      if (level.length > 0) {
        for (let i = 0; i < level.length; i++) {
          if (i % 2 === 0) {
            level[i].style['backgroundColor'] = '#D4DDF3 ';
          } else {
            level[i].style['backgroundColor'] = '#EFF1F6 ';
          }
        }
      }
    });
  },
  methods,
  watch: {
    value(val) {
      if (val) return (this.formSearch = { ...this.value });
    },
    dataSource: {
      handler(val) {
        // this.list();
        this.$nextTick(() => {
          this.expandRows.forEach(item => {
            this.$refs.multipleTable.toggleRowExpansion(item.row, item.isExp);
          });
          if (val && val.length != 0) {
            this.$refs.multipleTable.doLayout();
          }
        });
      },
      deep: true,
    },
    columns(val) {
      this.tableDataList = this.columns;
    },
  },
  components: {
    tableColumns,
    hidenColumns,
    render: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, opt) => {
        const params = {
          row: opt.props.row,
          index: opt.props.index,
        };
        if (opt.props.column) params.column = opt.props.column;
        return opt.props.render(h, params);
      },
    },
    nuButton
  },
};
</script>

<style scoped>
.el-form-item__label {
  width: auto !important;
  white-space: nowrap;
  color: var(--label-color);
}

.el-range-editor--mini .el-range__close-icon,
.el-range-editor--mini .el-range__icon {
  line-height: 20px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}
</style>

<style scoped>
::v-deep .fixline {
  position: sticky;
  top: 0px;
  /* background: #000; */
  background: var(--table-tree-level-0-bgc);
  color: #fff;
  z-index: 3;
  font-weight: bold;
}

/* ::v-deep .el-table__header-wrapper{
  position: absolute;
  z-index: 5;
}
::v-deep .el-table__fixed-header-wrapper{
  position: absolute;
  z-index: 6;
} */
::v-deep .el-table__body-wrapper {
  overflow-y: auto !important;
  /* position: relative; */
  /* top: 100px; */
}

::v-deep .el-table__fixed-body-wrapper {
  /* position: relative; */
  /* top: 100px !important; */
}

/* ::v-deep .el-table__footer-wrapper {
  top: 100px;
  position: absolute;
} */

::v-deep .el-table__fixed-footer-wrapper {
  top: 100px;
  position: absolute;
}

::v-deep .el-table__footer-wrapper .totalclassname .cell {
  display: none;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: var(--table-tree-level-0-bgc) !important;
  color: var(--table-tree-level-0-color);
}

::v-deep .el-table__fixed-footer-wrapper tbody td {
  background-color: var(--table-tree-level-0-bgc) !important;
  color: var(--table-tree-level-0-color);
}

/* ::v-deep .el-table tr th{
  height: 50px;
}

::v-deep .el-table tr th .cell{
  height: 50px;
}

.el-table ::v-deep .cell{
  height: 50px;
} */
/* .el-table__body-wrapper {
  overflow-y: auto !important;
  position: relative;
  margin-top: 30px;
}

.el-table__footer-wrapper {
  top: 30px;
  position: absolute;
}

.el-table__footer-wrapper .totalclassname .cell {
  display: none;
} */

/* .el-table__header-wrapper tbody td,
.el-table__footer-wrapper tbody td {
  background-color: #bfe5f9 !important;
  color: #0e2d5f;
} */

.table-form-container_content {
  /* overflow: hidden; */
}

.table-form-container_content .btn-operates {
  margin-bottom: 6px;
  float: right;
}

.table-form-container_content .btn-operates a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

.table-header {
  padding-top: 10px;
  text-align: end;
}

.table-header .table-header-item {
  margin-left: 20px;
}

.table-header .table-header_button {
  text-align: right;
  float: right;
  margin-bottom: 12px;
  line-height: 40px;
}

.table-header .table-header-item .el-form-item {
  width: 100%;
  display: flex;
  flex: auto;
  margin-bottom: 12px;
}

.table-header .table-header-item .el-form-item .el-form-item__content,
.table-header .table-header-item .el-form-item .el-select {
  width: 100%;
}

::v-deep .el-table-column--selection .cell {
  text-align: center;
}

::v-deep .table-el-table__body {
  width: 100%;
}

.newjump {
  font-size: 12px;
  text-decoration: none;
  color: dodgerblue;
}

.pagination {
  text-align: center;
}

::v-deep .el-table__header {
  height: var(--table-header-height) !important;
  color: var(--table-header-color);
  background-color: var(--table-header-bgc-color) !important;
  font-size: var(--table-header-font);
  /* opacity: var(--table-header-bgc-opacity); */
}

.table-header .el-button {
  margin: var(--button-body-margin);
  padding-left: var(--button-body-padding-left);
  padding-right: var(--button-body-padding-right);
  box-shadow: var(--button-box-shadow);
  border: var(--button-border);
  color: var(--button-color) !important;
  background-color: var(--button-bgc) !important;
}

.table-header .el-button:active {
  background: var(--button-active-background) !important;
  border-color: var(--button-active-border-color) !important;
  color: var(--button-active-color) !important;
}

.el-select-dropdown__item.selected {
  color: var(--select-selected) !important;
}

.el-select-dropdown__item:hover {
  background-color: var(--select-hover) !important;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--select-selected) !important;
}

::v-deep .el-input__inner::-webkit-input-placeholder {
  color: var(--form-input-tips);
}

::v-deep .el-input__inner {
  box-shadow: var(--input-box-shadow);
  color: var(--input-color);
  font-size: var(--form-input-fontsize);
  border: var(--input-border) !important;
  background-color: var(--input-bgc);
}

.el-table ::v-deep .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
}

.el-table ::v-deep .el-input__suffix .el-input__suffix-inner .el-input__icon {
  line-height: 25px !important;
}

::v-deep .el-range-editor .el-range-input {
  background-color: var(--input-bgc);
  color: var(--input-color);
}

.el-table {
  background-color: var(--table-bgc);
  color: var(--table-color);
  /* opacity: var(--table-opacity); */
}

.el-table ::v-deep .el-table__cell {
  padding: 1px 0 !important;
}

.el-table ::v-deep th.el-table__cell {
  height: var(--table-header-height);
  background-color: var(--table-header-bgc-color) !important;
  /* text-align: var(--table-header-text-align) !important; */
  color: var(--table-header-color) !important;
}

.el-table ::v-deep tbody {
  font-size: var(--table-fontSize);
}

.el-table ::v-deep thead {
  height: var(--table-header-height);
  /* box-shadow: var(--table-header-bgc-opacity); */
}

.el-table ::v-deep .el-table__body-wrapper tr:hover {
  color: var(--table-focus-color);
}

::v-deep .el-table__row.el-table__row--level-0 {
  background-color: var(--table-tree-level-0-bgc) !important;
}

::v-deep .el-table__row.el-table__row--level-0 .el-table__cell {
  color: var(--table-tree-level-0-color);
  border-right: 0px;
  font-weight: bold;
  font-size: var(--table-tree-level-0-font);
}

::v-deep .el-table__row.el-table__row--level-1 {
  background-color: var(--table-tree-level-1-bgc) !important;
}

/* ::v-deep .el-table__row.expanded.el-table__row--level-1 .el-table__cell {
  color: var(--table-tree-level-1-color);
} */
::v-deep .el-table__row.el-table__row--level-2 {
  background-color: var(--table-tree-level-2-bgc) !important;
}

/* ::v-deep .el-table__row.expanded.el-table__row--level-2 .el-table__cell {
  color: var(--table-tree-level-2-color);
  border-right: 0px;
  font-weight: bold;
  font-size: var(--table-tree-level-2-font);
} */
::v-deep .el-table__row.el-table__row--level-3 {
  background-color: var(--table-tree-level-3-bgc) !important;
}

/* ::v-deep .el-table__row.expanded.el-table__row--level-3 .el-table__cell {
  color: var(--table-tree-level-3-color);
  border-right: 0px;
  font-weight: bold;
  font-size: var(--table-tree-level-3-font);
} */
/* .el-table ::v-deep .el-table__row.el-table__row--level-2 {
  background-color: #dfe5ee !important;
} */
::v-deep .el-table__indent {
  /* padding-left: 0px !important; */
}

/* ::v-deep .el-table__row--level-1:nth-child(2n + 0) {
  background-color: var(--table-bgc-1) !important;

}
::v-deep .el-table__row--level-1:nth-child(2n + 1) {
  background-color: var(--table-bgc-2) !important;
} */
.el-table ::v-deep .el-table__body-wrapper tr:nth-child(2n + 0) {
  background-color: var(--table-bgc-1);
  border: none;
}

.el-table ::v-deep .el-table__body-wrapper tr:nth-child(2n + 1) {
  background-color: var(--table-bgc-2);
}


::v-deep .el-table td {
  border-bottom: 1px solid rgba(242, 246, 252, 1) !important;
  /* border-bottom: none !important; */
}

::v-deep .el-table--border td {
  border-right: 1px solid #ffffff;
}

::v-deep .el-table__row--level-0 {
  background-color: #294057 !important;
}

::v-deep .el-date-editor .el-range-separator {
  color: var(--input-color);
}

.el-row {
  margin-top: 5px;
  /* padding: 10px; */
  /* background-color: var(--layout-bgc); */
}

.table-col {
  padding: 0px 10px 0px 10px;
}

.tableOperateBtn {
  display: inline-block;
  border: none !important;
  box-shadow: none !important;
  padding: 1px 0 !important;
  /* padding-right: 0px !important;
  padding-left: 0px !important; */
}

/* 树形图标样式 */
::v-deep .el-table__row--level-0 .el-table__expand-icon--expanded {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.el-table ::v-deep .cell {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

/* 操作按钮样式 */
.operate-group {
  display: flex;
  justify-content: space-around;
}

.el-table--border th.gutter:last-of-type {
  display: block !important;
  width: 10px !important;
}

::v-deep .el-table__fixed::before,
.el-table__fixed-right::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: unset;
  z-index: 4;
}

.el-table__fixed-right {
  height: 100% !important;
  
}

.el-table__fixed-body-wrapper {
  max-height: 100% !important;
}
::v-deep .el-table__fixed-body-wrapper tr {
  background-color: var(--table-bgc-2);
}
/* ::v-deep .el-table--scrollable-x .is-scrolling-right {
  overflow-x: overlay;
} */

::v-deep .el-table__fixed {
  height: auto !important;
  bottom: 10px !important;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: auto !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  font-size: 14px;
  font-weight: 400 !important;
}
.hideshow {
  float: right;
  z-index: 5;
}
::v-deep .el-pagination {
  margin-top: 7px;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgba(71, 99, 255, 1);
}

::v-deep .el-pager li {
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}

::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .el-pager li {
  min-width: 32px;
}

::v-deep .el-pagination button {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-table--border .el-table__cell {
  border-right:none
}
</style>
